<div class="login-wrapper">
    <div class="login-container">
<!--        <img src="./assets/image/logo-white@3x.png" alt="logo" class="logo" />-->
        <div class="login-form">
            <h2 class="login-title">若依管理系统</h2>
            <form nz-form [nzLayout]="'vertical'" [formGroup]="dataForm">
                <div nz-row [nzGutter]="24">
                    <div nz-col [nzSpan]="24">
                        <nz-form-item nz-row>
                            <nz-form-control [nzErrorTip]="errorNameTpl">
                                <nz-input-group [nzPrefix]="prefixUser" nzSize="large">
                                    <input
                                        nz-input
                                        formControlName="userName"
                                        type="text"
                                        [(ngModel)]="login.username"
                                        placeholder="请输入登录用户名"
                                    />
                                </nz-input-group>
                                <ng-template #prefixUser><i nz-icon nzType="user"></i></ng-template>
                                <ng-template #errorNameTpl let-control>
                                    <ng-container *ngIf="control.hasError('required')">
                                        登录用户名不能为空
                                    </ng-container>
                                </ng-template>
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                    <div nz-col [nzSpan]="24">
                        <nz-form-item nz-row>
                            <nz-form-control [nzErrorTip]="errorPasswordTpl">
                                <nz-input-group [nzPrefix]="prefixPassword" nzSize="large">
                                    <input
                                        nz-input
                                        formControlName="password"
                                        type="password"
                                        [(ngModel)]="login.password"
                                        placeholder="请输入登录密码"
                                    />
                                </nz-input-group>
                                <ng-template #prefixPassword><i nz-icon nzType="lock"></i></ng-template>
                                <ng-template #errorPasswordTpl let-control>
                                    <ng-container *ngIf="control.hasError('required')">
                                        登录密码不能为空
                                    </ng-container>
                                </ng-template>
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                    <div nz-col [nzSpan]="24">
                        <nz-form-item nz-row>
                            <nz-form-control [nzErrorTip]="errorCaptchaTpl">
                                <nz-input-group [nzAddOnAfter]='captchaImage'  nzSize="large">
                                    <input
                                        nz-input
                                        formControlName="captcha"
                                        type="text"
                                        [(ngModel)]="login.code"
                                        placeholder="请输入验证码"
                                    />
                                </nz-input-group>
                                <ng-template #captchaImage>
                                    <img nz-image width="70px" height="36px" nzSrc="error" (click)="getCode()"  [nzFallback]="img" alt="" [src]='img' />
                                </ng-template>
                                <ng-template #errorCaptchaTpl let-control>
                                    <ng-container *ngIf="control.hasError('required')">
                                        验证码不能为空
                                    </ng-container>
                                </ng-template>
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                </div>
                <div nz-row [nzGutter]="24">
                    <div nz-col [nzSpan]="24">
                        <button
                            nz-button
                            nzBlock
                            [nzType]="'primary'"
                            nzSize="large"
                            (click)="onLoginValid()"
                            [nzLoading]="loadingState"
                            [disabled]="dataForm.invalid || loadingState"
                        >
                            登录
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
